```html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Nginx HTTPS配置指南 | 网络安全最佳实践</title>
    <link href="https://cdn.staticfile.org/font-awesome/6.4.0/css/all.min.css" rel="stylesheet">
    <link href="https://cdn.staticfile.org/tailwindcss/2.2.19/tailwind.min.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Noto+Serif+SC:wght@400;500;600;700&family=Noto+Sans+SC:wght@300;400;500;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Noto Sans SC', 'Noto Serif SC', Tahoma, Arial, Roboto, "Droid Sans", "Helvetica Neue", "Droid Sans Fallback", "Heiti SC", "Hiragino Sans GB", Simsun, sans-serif;
            background-color: #f8fafc;
            color: #1e293b;
        }
        .hero-gradient {
            background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
        }
        .code-block {
            background-color: #1e293b;
            border-left: 4px solid #3b82f6;
        }
        .step-card {
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
        }
        .step-card:hover {
            transform: translateY(-4px);
            box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
        }
        .step-icon {
            background-color: #3b82f6;
            color: white;
            width: 48px;
            height: 48px;
            display: flex;
            align-items: center;
            justify-content: center;
            border-radius: 12px;
            margin-right: 16px;
        }
        .highlight-text {
            position: relative;
            z-index: 1;
        }
        .highlight-text::after {
            content: '';
            position: absolute;
            bottom: 2px;
            left: 0;
            width: 100%;
            height: 8px;
            background-color: #93c5fd;
            z-index: -1;
            opacity: 0.6;
        }
    </style>
</head>
<body class="antialiased">
    <!-- Hero Section -->
    <section class="hero-gradient text-white py-20 px-4 md:py-32">
        <div class="max-w-4xl mx-auto text-center">
            <h1 class="text-4xl md:text-5xl font-bold mb-6 leading-tight">
                在 <span class="highlight-text">Nginx</span> 中启用 <span class="highlight-text">HTTPS</span>
            </h1>
            <p class="text-xl md:text-2xl max-w-3xl mx-auto opacity-90 mb-10">
                保护您的网站数据传输安全，建立用户信任的完整指南
            </p>
            <div class="flex flex-wrap justify-center gap-4">
                <a href="#step1" class="bg-white text-blue-600 font-semibold px-6 py-3 rounded-lg hover:bg-blue-50 transition-all duration-300 flex items-center">
                    <i class="fas fa-lock-open mr-2"></i> 开始配置
                </a>
                <a href="#why" class="border-2 border-white text-white font-semibold px-6 py-3 rounded-lg hover:bg-white hover:bg-opacity-10 transition-all duration-300 flex items-center">
                    <i class="fas fa-question-circle mr-2"></i> 为什么需要HTTPS？
                </a>
            </div>
        </div>
    </section>

    <!-- Why HTTPS Section -->
    <section id="why" class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="w-16 h-1 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">为什么HTTPS如此重要？</h2>
            </div>
            <div class="grid md:grid-cols-3 gap-8">
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-shield-alt"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">数据加密</h3>
                    <p class="text-gray-600">保护用户敏感信息（如密码、信用卡号）在传输过程中不被窃取。</p>
                </div>
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-check-circle"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">身份验证</h3>
                    <p class="text-gray-600">确保用户连接的是真正的网站服务器，而非中间人攻击者。</p>
                </div>
                <div class="bg-slate-50 p-6 rounded-xl border border-slate-100">
                    <div class="text-blue-500 text-3xl mb-4">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <h3 class="text-xl font-bold mb-3 text-gray-800">SEO优势</h3>
                    <p class="text-gray-600">Google等搜索引擎会优先显示HTTPS网站，提升搜索排名。</p>
                </div>
            </div>
        </div>
    </section>

    <!-- Process Flowchart -->
    <section class="py-16 px-4 bg-slate-50">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="w-16 h-1 bg-blue-500 mr-4"></div>
                <h2 class="text-3xl font-bold text-gray-800">HTTPS配置流程图</h2>
            </div>
            <div class="bg-white p-6 rounded-xl shadow-sm">
                <div class="mermaid">
                    flowchart TD
                        A[获取SSL证书] -->|Let's Encrypt 或 CA购买| B(配置Nginx)
                        B --> C[测试HTTPS连接]
                        C --> D[优化安全设置]
                        D --> E[监控和更新]
                </div>
            </div>
        </div>
    </section>

    <!-- Step 1 -->
    <section id="step1" class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="step-icon">
                    <i class="fas fa-certificate text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">步骤 1: 获取 SSL 证书</h2>
            </div>
            <p class="text-gray-600 mb-8 text-lg leading-relaxed">
                要在 Nginx 中启用 HTTPS，首先需要获取一个有效的 SSL 证书。可以从商业证书颁发机构（CA）购买证书，或使用 Let's Encrypt 免费证书。
            </p>

            <div class="grid md:grid-cols-2 gap-8 mb-16">
                <div class="step-card bg-slate-50 rounded-xl p-6 border border-slate-200">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">1</span>
                        使用 Let's Encrypt 获取免费 SSL 证书
                    </h3>
                    <p class="text-gray-600 mb-4">
                        Let's Encrypt 提供免费的 SSL 证书，支持自动化获取和续期。可以使用 Certbot 工具来获取证书。
                    </p>
                    <div class="code-block text-white p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                        <span class="text-blue-300"># 安装 Certbot</span><br>
                        sudo apt-get update<br>
                        sudo apt-get install certbot<br><br>
                        <span class="text-blue-300"># 获取证书</span><br>
                        sudo certbot certonly --nginx -d example.com -d www.example.com<br><br>
                        <span class="text-blue-300"># 自动续期</span><br>
                        sudo certbot renew --dry-run
                    </div>
                    <p class="text-gray-600 text-sm">
                        这将会在 <code class="bg-slate-200 px-1 rounded">/etc/letsencrypt/live/example.com/</code> 目录下生成证书和密钥文件。
                        Let's Encrypt 证书有效期为 90 天，会自动续期。
                    </p>
                </div>

                <div class="step-card bg-slate-50 rounded-xl p-6 border border-slate-200">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">2</span>
                        从 CA 购买 SSL 证书
                    </h3>
                    <p class="text-gray-600 mb-4">
                        如果需要更高等级的信任，可以从商业 CA 购买证书。购买流程通常包括：
                    </p>
                    <div class="space-y-4">
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs mt-1 mr-2">1</div>
                            <p class="text-gray-600 text-sm">生成 CSR 文件：使用 OpenSSL 生成证书签名请求（CSR）文件和私钥。</p>
                        </div>
                        <div class="code-block text-white p-4 rounded-lg font-mono text-sm mb-2 overflow-x-auto">
                            openssl req -new -newkey rsa:2048 -nodes -keyout example.com.key -out example.com.csr
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs mt-1 mr-2">2</div>
                            <p class="text-gray-600 text-sm">将 CSR 文件提交给 CA，并按照其要求完成验证和购买流程。</p>
                        </div>
                        <div class="flex items-start">
                            <div class="bg-blue-100 text-blue-600 rounded-full w-5 h-5 flex-shrink-0 flex items-center justify-center text-xs mt-1 mr-2">3</div>
                            <p class="text-gray-600 text-sm">下载并安装证书：下载 CA 颁发的证书文件，并存储在服务器中。</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Step 2 -->
    <section class="py-16 px-4 bg-slate-50">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="step-icon">
                    <i class="fas fa-server text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">步骤 2: 配置 Nginx 启用 HTTPS</h2>
            </div>
            <p class="text-gray-600 mb-8 text-lg leading-relaxed">
                获取 SSL 证书后，需要配置 Nginx 以支持 HTTPS。以下是配置步骤：
            </p>

            <div class="step-card bg-white rounded-xl p-6 border border-slate-200 mb-8">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">1</span>
                    修改 Nginx 配置文件
                </h3>
                <p class="text-gray-600 mb-4">
                    编辑 Nginx 配置文件，通常位于 <code class="bg-slate-100 px-1 rounded">/etc/nginx/sites-available/default</code> 或 <code class="bg-slate-100 px-1 rounded">/etc/nginx/conf.d/example.com.conf</code>。
                </p>
                <div class="code-block text-white p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                    <span class="text-blue-300"># HTTP 重定向到 HTTPS</span><br>
                    server {<br>
                    &nbsp;&nbsp;listen 80;<br>
                    &nbsp;&nbsp;server_name example.com www.example.com;<br><br>
                    &nbsp;&nbsp;<span class="text-blue-300"># 重定向 HTTP 到 HTTPS</span><br>
                    &nbsp;&nbsp;return 301 https://$host$request_uri;<br>
                    }<br><br>
                    <span class="text-blue-300"># HTTPS 服务器配置</span><br>
                    server {<br>
                    &nbsp;&nbsp;listen 443 ssl;<br>
                    &nbsp;&nbsp;server_name example.com www.example.com;<br><br>
                    &nbsp;&nbsp;<span class="text-blue-300"># SSL 证书配置</span><br>
                    &nbsp;&nbsp;ssl_certificate /etc/letsencrypt/live/example.com/fullchain.pem;<br>
                    &nbsp;&nbsp;ssl_certificate_key /etc/letsencrypt/live/example.com/privkey.pem;<br><br>
                    &nbsp;&nbsp;<span class="text-blue-300"># 推荐的 SSL 设置</span><br>
                    &nbsp;&nbsp;ssl_protocols TLSv1.2 TLSv1.3;<br>
                    &nbsp;&nbsp;ssl_ciphers 'ECDHE-ECDSA-AES128-GCM-SHA256:ECDHE-RSA-AES128-GCM-SHA256';<br>
                    &nbsp;&nbsp;ssl_prefer_server_ciphers on;<br><br>
                    &nbsp;&nbsp;<span class="text-blue-300"># 其他配置...</span><br>
                    &nbsp;&nbsp;location / {<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;proxy_pass http://localhost:3000; <span class="text-blue-300"># 示例应用</span><br>
                    &nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header Host $host;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header X-Real-IP $remote_addr;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;<br>
                    &nbsp;&nbsp;&nbsp;&nbsp;proxy_set_header X-Forwarded-Proto $scheme;<br>
                    &nbsp;&nbsp;}<br>
                    }
                </div>
            </div>

            <div class="step-card bg-white rounded-xl p-6 border border-slate-200">
                <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                    <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">2</span>
                    检查并重启 Nginx
                </h3>
                <p class="text-gray-600 mb-4">
                    在完成配置修改后，检查 Nginx 配置的正确性并重启服务：
                </p>
                <div class="code-block text-white p-4 rounded-lg font-mono text-sm mb-4 overflow-x-auto">
                    <span class="text-blue-300"># 检查配置语法</span><br>
                    sudo nginx -t<br><br>
                    <span class="text-blue-300"># 重启Nginx服务</span><br>
                    sudo systemctl restart nginx
                </div>
            </div>
        </div>
    </section>

    <!-- Step 3 -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="step-icon">
                    <i class="fas fa-check-circle text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">步骤 3: 测试 HTTPS 配置</h2>
            </div>
            <p class="text-gray-600 mb-8 text-lg leading-relaxed">
                配置完成后，验证 HTTPS 是否正常工作，并检查安全性配置。
            </p>

            <div class="grid md:grid-cols-2 gap-8">
                <div class="step-card bg-slate-50 rounded-xl p-6 border border-slate-200">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">1</span>
                        浏览器测试
                    </h3>
                    <p class="text-gray-600 mb-4">
                        使用浏览器访问 <code class="bg-slate-200 px-1 rounded">https://example.com</code>，检查是否能够成功建立 HTTPS 连接，并确保没有证书错误。
                    </p>
                    <div class="flex items-center text-blue-500 font-medium">
                        <i class="fas fa-external-link-alt mr-2"></i>
                        <span>检查浏览器地址栏中的安全锁图标</span>
                    </div>
                </div>

                <div class="step-card bg-slate-50 rounded-xl p-6 border border-slate-200">
                    <h3 class="text-xl font-bold mb-4 text-gray-800 flex items-center">
                        <span class="bg-blue-100 text-blue-600 rounded-full w-6 h-6 flex items-center justify-center text-sm mr-3">2</span>
                        SSL 测试工具
                    </h3>
                    <p class="text-gray-600 mb-4">
                        使用 <a href="https://www.ssllabs.com/ssltest/" class="text-blue-500 hover:underline">SSL Labs</a> 等在线工具测试 SSL 配置的安全性和兼容性。
                    </p>
                    <div class="flex items-center text-blue-500 font-medium">
                        <i class="fas fa-shield-alt mr-2"></i>
                        <span>获取详细的SSL配置评分和建议</span>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Step 4 -->
    <section class="py-16 px-4 bg-slate-50">
        <div class="max-w-4xl mx-auto">
            <div class="flex items-center mb-12">
                <div class="step-icon">
                    <i class="fas fa-bolt text-xl"></i>
                </div>
                <h2 class="text-3xl font-bold text-gray-800">步骤 4: 优化 HTTPS 性能和安全性</h2>
            </div>
            <p class="text-gray-600 mb-8 text-lg leading-relaxed">
                为了提升 HTTPS 性能和安全性，可以进行以下优化：
            </p>

            <div class="grid md:grid-cols-3 gap-6">
                <div class="step-card bg-white rounded-xl p-6 border border-slate-200">
                    <div class="text-blue-500 text-2xl mb-3">
                        <i class="fas fa-rocket"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">启用 HTTP/2</h3>
                    <p class="text-gray-600 text-sm">
                        HTTP/2 可以显著提高 HTTPS 性能，支持多路复用、头部压缩等特性。
                    </p>
                    <div class="code-block text-white p-3 rounded-lg font-mono text-xs mt-3 overflow-x-auto">
                        listen 443 ssl http2;
                    </div>
                </div>

                <div class="step-card bg-white rounded-xl p-6 border border-slate-200">
                    <div class="text-blue-500 text-2xl mb-3">
                        <i class="fas fa-lock"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">使用 HSTS</h3>
                    <p class="text-gray-600 text-sm">
                        HTTP 严格传输安全（HSTS）可以强制浏览器使用 HTTPS，增强安全性。
                    </p>
                    <div class="code-block text-white p-3 rounded-lg font-mono text-xs mt-3 overflow-x-auto">
                        add_header Strict-Transport-Security "max-age=31536000; includeSubDomains" always;
                    </div>
                </div>

                <div class="step-card bg-white rounded-xl p-6 border border-slate-200">
                    <div class="text-blue-500 text-2xl mb-3">
                        <i class="fas fa-tachometer-alt"></i>
                    </div>
                    <h3 class="text-lg font-bold mb-2 text-gray-800">OCSP Stapling</h3>
                    <p class="text-gray-600 text-sm">
                        OCSP Stapling 可以减少证书验证时间，提高 TLS 握手速度。
                    </p>
                    <div class="code-block text-white p-3 rounded-lg font-mono text-xs mt-3 overflow-x-auto">
                        ssl_stapling on;<br>
                        ssl_stapling_verify on;<br>
                        ssl_trusted_certificate /path/to/chain.pem;
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Final Tips -->
    <section class="py-16 px-4 bg-white">
        <div class="max-w-4xl mx-auto">
            <div class="bg-blue-50 border-l-4 border-blue-500 p-6 rounded-r-lg">
                <div class="flex">
                    <div class="flex-shrink-0">
                        <i class="fas fa-lightbulb text-blue-500 text-2xl mt-1 mr-4"></i>
                    </div>
                    <div>
                        <h3 class="text-xl font-bold text-gray-800 mb-3">专业建议</h3>
                        <ul class="space-y-2 text-gray-700">
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>定期更新SSL/TLS协议和加密套件，禁用不安全的旧版本</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>设置证书自动续期提醒，避免证书过期导致服务中断</span>
                            </li>
                            <li class="flex items-start">
                                <i class="fas fa-check text-blue-500 text-xs mt-1 mr-2"></i>
                                <span>考虑使用CDN服务，提升HTTPS内容的全球分发速度</span>
                            </li>
                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <script src="https://cdn.jsdelivr.net/npm/mermaid@latest/dist/mermaid.min.js"></script>
    <script>
        mermaid.initialize({
            startOnLoad: true,
            theme: 'default',
            flowchart: {
                useMaxWidth: true,
                htmlLabels: true,
                curve: 'basis'
            }
        });
        
        // 平滑滚动
        document.querySelectorAll('a[href^="#"]').forEach(anchor => {
            anchor.addEventListener('click', function (e) {
                e.preventDefault();
                document.querySelector(this.getAttribute('href')).scrollIntoView({
                    behavior: 'smooth'
                });
            });
        });
    </script>
</body>
</html>
```